<template>
    <div class="login">
       <img class="pic" src= "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f0435cb36403a801214168123860.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641205710&t=56b4808deb72a6269ea9ccf51985da3e">
        <div class="login-box">
            <h3 class="title">欢迎登录后台管理系统</h3>
            <div class="box">
                <el-tabs v-model="active" >
                  <el-tab-pane label="账号登录" :name="1">
                    <LoginAccount :username="$route.query.username"></LoginAccount>  
                  </el-tab-pane>
                  <el-tab-pane label="手机登录" :name="2">
                    <LoginPhone></LoginPhone>  
                  </el-tab-pane>
                </el-tabs>
            </div>
        </div>

    </div>
</template>

<script>
import {ref,toRefs,reactive} from "vue"
import LoginPhone from "@/components/LoginPhone.vue"
import LoginAccount from "@/components/LoginAccount.vue"
export default {
    components:{
      LoginPhone,
      LoginAccount
    },
     mounted(){
        //  console.log(this.$route)
     },
   setup(){
      const state = reactive({
        active:1,

      })
      return {
        ...toRefs(state)
      }
   }
}
</script>

<style lang="scss" >
.login{
  width:100%;
  height:100%;
    .pic{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login-box{
        position: absolute;
        width:390px;
        height:370px;
        // min-height:340px;
        border:1px solid darkkhaki;
        border-radius: 8px;
        padding:15px;
        background: rgba(0, 0, 0, 0.2);
        left:0;
        right:-500px;
        bottom:0;
        top:-200px;
        margin:auto;
        .title{
            font-size:26px;
            text-align: center;
            font-weight: 500;
            color:#fff;
        }
        .box{
            margin-top:20px;
            .el-tabs__nav {
                width:100%;
                .el-tabs__active-bar{
                    background-color: darkorange;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:darkorange;
                }
            }
            .myform{
                .el-input__icon{
                    color:#fff;
                }
                .el-input__inner{
                    background: transparent;
                    color:#fff;
                }
                 .el-form-item__label{
                    color:#fff;
                }

                .flex{
                    display: flex;
                    .btn{
                        flex:1;
                    }
                }
                .lastitem{
                    margin-bottom: 0;
                    ::v-deep .el-form-item__content{
                        line-height:1 ;
                    }
                    .links{
                        display: flex;
                        justify-content: space-between;
                        .litem{
                            font-size: 12px;
                            color:darkorange;
                        }
                        .color{
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
}
</style>